<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta charset="utf-8">
  <title> RTCPeerConnection Html5 </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>

<div style="text-align:center;">
  <button id="tehbutton" onclick="start();">Start</button><button id="callbutton" onclick="call();" disabled ="disabled">Call</button>

  <p>Local video</p>
  <p><video id="localVideo" width="400" poster = "images/1.png"></video></p>
  <p>remote video</p>
  <p><video id="remoteVideo" width="400" style="background:black;"></video></p>
</div> 

<script type="text/javascript">
//http://www.simpl.info/rtcpeerconnection/
var button = document.getElementById("tehbutton"); //按钮
var callbutton = document.getElementById("callbutton"); //按钮
var localVideo = document.getElementById("localVideo"); //本地视频
var remoteVideo = document.getElementById("remoteVideo"); //远程接收视频

var console = console || {log:function(){}};
navigator.getUserMedia = navigator.getUserMedia|| navigator.webkitGetUserMedia|| navigator.mozGetUserMedia|| navigator.msGetUserMedia;
window.URL = window.URL|| window.webkitURL|| window.mozURL|| window.msURL;

var localPeerConnection;
var remotePeerConnection;
var localStream;
var server = null;

function start(){
	button.innerHTML = "Stop!";
	button.onclick = stop;

	navigator.getUserMedia({video:true,audio:true}, 
		getLocalStream,
		function(error) {
		alert("navigator.getUserMedia error: ", error);
	}); 

}

function stop(){
	button.innerHTML = "Start!";
	button.onclick = start;
	localVideo.pause();
	localVideo.src = "";
	localVideo.poster = "images/1.png";
}

function getLocalStream(stream){
	console.log("LOCAL:"+stream);
	localStream = stream;
	if (localVideo.mozSrcObject !== undefined) {
        localVideo.mozSrcObject = stream;
    } else {
        localVideo.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
    };
    localVideo.play();
	callbutton.disabled = false;

}


function call(){
	callbutton.innerHTML = "hang up!";
	callbutton.onclick = hang; 

	window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
	
	console.log("初始化RTCPeerConnection");

	localPeerConnection = new RTCPeerConnection(server);
	localPeerConnection.onaddstream = function(){}; //接收远程不处理模拟没有的情况
	localPeerConnection.onicecandidate = getLocalIceCandidate; //for chrome
	
	remotePeerConnection  = new RTCPeerConnection(server);
	remotePeerConnection.onaddstream = remoteVideoShow;
	remotePeerConnection.onicecandidate = getRemoteIceCandidate;

	localPeerConnection.addStream(localStream);

	console.log("本地呼叫远程...");
	localPeerConnection.createOffer(getLocalDescription,failed);
}

function getLocalIceCandidate(event){
  if (event.candidate) {
    remotePeerConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
    console.log("Local ICE candidate: \n" + event.candidate.candidate);
  }
}



function getRemoteIceCandidate(event){
  if (event.candidate) {
    localPeerConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
    console.log("Remote ICE candidate: \n " + event.candidate.candidate);
  }
}


function getLocalDescription(offer){
	console.log("本地offer："+offer);
	console.log(offer);
	localPeerConnection.setLocalDescription(offer);

	console.log("远程接收offer");
	//远程消息通信接收后
	remotePeerConnection.setRemoteDescription(offer);
	console.log("远程应答本地："+offer);
	remotePeerConnection.createAnswer(getRemoteDescription,failed);
} 

function getRemoteDescription(answer){
	console.log("远程answer："+answer);
	remotePeerConnection.setLocalDescription(answer);
	console.log("本地接受应答");
	//本地消息通信接收后
	localPeerConnection.setRemoteDescription(answer);
} 

function remoteVideoShow(event){
	var stream = event.stream;
	console.log(stream);
	if (remoteVideo.mozSrcObject !== undefined) {
        remoteVideo.mozSrcObject = stream;
    } else {
        remoteVideo.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
    };
    remoteVideo.play();
}

function hang(){
	localPeerConnection.close();
	remotePeerConnection.close();
	remoteVideo.src="a";
	callbutton.innerHTML = "call";
	callbutton.onclick = call; 
}

function failed(code) {
	console.log("Failure callback: " + code);
	console.log(code);
} 
</script> 



 </body>
</html>
